<template>
  <!-- 显示控制 -->
  <div id="showController" @click="containerShow = !containerShow">
    <img src="@/assets/images/右移.png" alt="" />
  </div>
  <!-- 主界面 -->
  <transition name="fade">
    <div class="Container" v-show="containerShow">
      <!-- 显示控制 -->
      <div id="showController" @click="containerShow = !containerShow">
        <img src="@/assets/images/左移.png" alt="" />
      </div>
      <!-- 配置界面 -->
      <div id="table">
        <!-- 界面标题 -->
        <div class="title">
          <div></div>
          <span>制图参数配置</span>
        </div>
        <!-- 标签页 -->
        <el-tabs type="border-card" id="appendixData">
          <el-tab-pane label="图层绘制" name="0">
            <!-- 默认配置项 -->
            <defaultItem></defaultItem>
            <!-- 具体要素类型配置项 -->
          </el-tab-pane>
          <el-tab-pane label="图层管理" name="1"></el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </transition>
</template>

<script>
/* eslint-disable */
import pubsub from "pubsub-js";
import { getCurrentInstance, onMounted } from "vue";
import defaultItem from "@/views/configureItemList/defaultConfigureItem.vue";

export default {
  name: "参数控制台",
  components: {
    defaultItem,
  },
  data() {
    return {
      containerShow: true,
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();

    onMounted(() => {});

    return {};
  },
};
</script>

<style lang="less" scoped>
.Container {
  background-color: transparent;
  width: 20%;
  height: 100%;
  position: absolute;
  left: 0%;
  top: 0%;
  z-index: 999;
  > #showController {
    left: 80%;
    box-shadow: 0 0 5px 0.75px #3064f1;
  }
  > #table {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: whitesmoke;
    width: 90%;
    height: 100%;
    position: relative;
    float: left;
    > .title {
      //   background-color: #3064f1;
      height: 3.5%;
      width: 100%;
      margin-left: 2%;
      margin-top: 1%;
      margin-bottom: 1%;
      font-size: 150%;
      font-weight: bold;
      display: flex;
      align-items: center;
      > div {
        width: 7px;
        height: 55%;
        border-radius: 50px;
        background-color: #409eff;
        display: inline-block;
        margin-right: 2%;
      }
      > span {
        color: #313131;
        display: inline-block;
      }
    }
  }
}

#showController {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0.5%;
  left: 0.5%;
  z-index: 998;
  background-color: white;
  border-radius: 50%;
  > img {
    width: 70%;
    margin-left: 15%;
    margin-top: 15%;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: transform 0.4s;
}

.fade-enter-from {
  transform: translate(-100%, 0);
}
.fade-enter-to {
  transform: translate(0%, 0);
}
.fade-leave-from {
  transform: translate(0%, 0) !important;
}
.fade-leave-to {
  transform: translate(-100%, 0) !important;
}
</style>